<template>
    <div class="main">
        <Header class="main_header"/>
        <div style="height: 63px;"></div>
        <div class="main_body">
            <div class="main_left">
                <div>
                    <Sort/>
                </div>
                <div>
                    <ArticleList/>
                </div>
                <router-view></router-view>
            </div>
            <div style="flex: 3;"></div>
            <div class="main_right">
                <Upload/>
                <Hot style="margin-left: 10px;margin-top: 20px;"/>
            </div>
        </div>
        <Footer/>
    </div>

</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue'
import Sort from '@/views/home/article/sort/index.vue'
import ArticleList from '@/views/home/article/articleList/index.vue'
import Hot from '@/views/home/article/hot/index.vue'
import Upload from '@/views/home/article/upload/index.vue'
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;

  .main_header {
    height: 70px;
    position: fixed;
    width: 100%;
    z-index: 99999;
  }

  .main_body {
    display: flex;
    margin-left: 15%;
    margin-right: 15%;
    word-break: break-all;

    .main_left {
      margin-top: 1%;
      flex: 7;
      width: 70%;
    }

    .main_right {
      margin-top: 6%;
      position: fixed;
      top: 10px;
      margin-left: 49%;
      width: 355px;
    }
  }
}
</style>